<template>
  <div class="container">
    <div class="flex alignCenter fz14">
      <!-- <el-button type="primary" @click="allSave" :loading="loading">批量保存</el-button> -->
      <el-button type="primary" plain @click="dialogVisible=true">新增</el-button>
      （建议尺寸900*383）
    </div>
    <el-table :data="tableParams.rows" style="margin: 10px 0 30px;" :max-height="tableMaxHeight">
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column label="标题" prop="title" min-width="150" />
      <el-table-column prop="name" label="封面" width="220">
        <template #default="scope">
          <div class="bannerBox">
            <img :src="scope.row.cover" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="信息来源" width="150">
        <template #default="scope">
          <dictSelect v-model="scope.row.form" dictCode="info_source" readonly="1"></dictSelect>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="releaseDate" width="100" />
      <el-table-column label="是否精选" width="80">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.isSelected">是</el-tag>
          <el-tag type="info" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="跳转地址" prop="link" min-width="100">
        <template #default="scope">
          {{proxy.$utils.truncateString(scope.row.link, 80)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template #default="scope">
          <el-button type="primary" @click="handEdit(scope.row)" icon="Edit" circle size="small" />
          <el-button type="danger" @click="del(scope.row)" icon="Delete" circle size="small" />
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="params.pageIndex" v-model:limit="params.pageSize" @pagination="getInfo" />

    <el-dialog v-model="dialogVisible" title="编辑/维护" width="500" :before-close="handleClose">
      <el-form :model="formInline" label-width="80" ref="ruleFormRef" :rules="rules">
        <el-form-item label="序号">
          <el-input v-model="formInline.sort" placeholder="请输入序号" clearable />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="formInline.title" placeholder="请输入标题" clearable />
        </el-form-item>
        <el-form-item label="封面" prop="cover">
          <uploadImage v-model="formInline.cover"></uploadImage>
        </el-form-item>
        <el-form-item label="信息来源" prop="form">
          <dictSelect v-model="formInline.form" dictCode="info_source"></dictSelect>
        </el-form-item>
        <el-form-item label="发布时间" prop="releaseDate">
          <DatePicker v-model="formInline.releaseDate"></DatePicker>
        </el-form-item>
        <el-form-item label="是否精选">
          <el-switch v-model="formInline.isSelected" />
        </el-form-item>
        <el-form-item label="跳转地址" prop="link">
          <el-input v-model="formInline.link" placeholder="请输入跳转地址" type="textarea" :autosize="{ minRows: 4 }" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">保存</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
import { el } from "element-plus/es/locale";
const counter = useCounterStore();

let tableParams = ref({});
let loading = ref(false);
let params = ref({
  pageIndex: 1,
  pageSize: 50,
});
let dialogVisible = ref(false);
let formInline = ref({
  cover: "",
  title: "",
  form: "",
  releaseDate: "",
  sort: null,
  isSelected: false,
  link: "",
});
let rules = ref({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
  form: [{ required: true, message: "请选择信息来源", trigger: "blur" }],
  releaseDate: [{ required: true, message: "请选择发布时间", trigger: "blur" }],
  link: [{ required: true, message: "请输入跳转链接", trigger: "blur" }],
});

onMounted(() => {
  getInfo();
});

let tableMaxHeight = computed(() => {
  return `${window.innerHeight * 0.75}px`;
});

function handEdit(row) {
  formInline.value = proxy.$utils.formatFunction(row, { ...formInline.value });
  formInline.value._id = row._id;
  dialogVisible.value = true;
}

async function getInfo() {
  tableParams.value = await proxy.$apis.realInfo({
    type: "list",
    data: params.value,
  });
}

function handleClose() {
  formInline.value = {
    cover: "",
    title: "",
    form: "",
    releaseDate: "",
    sort: null,
    isSelected: false,
    link: "",
  };
  getInfo();
  if (proxy.$refs.ruleFormRef) proxy.$refs.ruleFormRef.resetFields();
  dialogVisible.value = false;
}

async function submitForm() {
  if (!proxy.$refs.ruleFormRef) return;
  await proxy.$refs.ruleFormRef.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      console.log("error submit!", fields);
    }
  });
}

async function del(row) {
  let resp = await proxy.$utils.confirmTips("确定删除吗？");
  if (!resp) return;
  await proxy.$apis.realInfo({
    data: { _id: row._id },
    type: "del",
  });
  proxy.$utils.showToast("删除成功");
  getInfo();
}

async function allSave() {
  for (let index = 0; index < tableParams.value.rows.length; index++) {
    const element = tableParams.value.rows[index];
    element.sort = 0;
    element.isSelectedTime = 0;
    await proxy.$apis.realInfo({
      data: element,
      type: "update",
    });
  }
  proxy.$utils.showToast("操作成功");
  getInfo();
}

async function save() {
  try {
    loading.value = true;
    let query = { ...formInline.value };
    query.timeStamp = proxy.$utils.getTimeFn(formInline.value.releaseDate);
    if (query.isSelected) {
      query.isSelectedTime = query.timeStamp;
    } else {
      query.isSelectedTime = 0;
    }
    await proxy.$apis.realInfo({
      data: query,
      type: formInline.value._id ? "update" : "add",
    });
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}
</script>



<style lang="scss" scoped>
.container {
  margin: 25px;
  .bannerBox {
    background-color: #f6f6f6;
    width: 200px;
    border-radius: 10px;
    position: relative;
    .el-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 10px;
      object-fit: cover;
    }
  }
  .iconDel {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #f44673;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
  }
}
</style>






